<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../base.css">
<link rel="stylesheet" href="/JDM/jd.css">
<style >
</style>
<body>
    <div class="jd_container">
        <div class="fixedbox">
                <header class="jd_search">
                        <a class="jd_logo" href="">
                           
                        </a>
                    <form  action="">
                        <input type="search" placeholder="占位符">
                    </form>
                        <a class="jd_login" href="">
                            登录
                        </a>
                </header>
               
        </div>
        <div class="jd_banner">
                <ul>
                    <li><a href=""><img src="../JDM/images/l8.jpg" alt=""></a></li>
                    <li><a href=""><img src="../JDM/images/l1.jpg" alt=""></a></li>
                    <li><a href=""><img src="../JDM/images/l2.jpg" alt=""></a></li>
                    <li><a href=""><img src="../JDM/images/l3.jpg" alt=""></a></li>
                    <li><a href=""><img src="../JDM/images/l4.jpg" alt=""></a></li>
                    <li><a href=""><img src="../JDM/images/l5.jpg" alt=""></a></li>
                    <li><a href=""><img src="../JDM/images/l6.jpg" alt=""></a></li>
                    <li><a href=""><img src="../JDM/images/l7.jpg" alt=""></a></li>
                    <li><a href=""><img src="../JDM/images/l8.jpg" alt=""></a></li>
                    <li><a href=""><img src="../JDM/images/l1.jpg" alt=""></a></li>
                </ul>
                <ul>
                        <li class="at"><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                    </ul>
            </div> 
            <div class="jd_nav">
                <ul>
                    <li><a href=""><img src="../JDM/images/nav0.png" alt=""> <p></p> </a></li>
                    <li><a href=""><img src="../JDM/images/nav1.png" alt=""> <p></p> </a></li>
                    <li><a href=""><img src="../JDM/images/nav2.png" alt=""> <p></p> </a></li>
                    <li><a href=""><img src="../JDM/images/nav3.png" alt=""> <p></p> </a></li>
                    <li><a href=""><img src="../JDM/images/nav4.png" alt=""> <p></p> </a></li>
                    <li><a href=""><img src="../JDM/images/nav5.png" alt=""> <p></p> </a></li>
                    <li><a href=""><img src="../JDM/images/nav6.png" alt=""> <p></p> </a></li>
                    <li><a href=""><img src="../JDM/images/nav7.png" alt=""> <p></p> </a></li>  
                </ul>
            </div>
            <div class="jd_product">
                <section class="jd_porduct_box sk">
                    <div class="tit nb">
                        <div class="f_left">
                            <span class="icon">
                            </span>
                            <span class="name">
                                掌上秒杀
                            </span>
                            <div class="time">
                                <span>0</span>
                                <span>0</span>
                                <span>:</span>
                                <span>0</span>
                                <span>0</span>
                                <span>:</span>
                                <span>0</span>
                                <span>0</span>
                            </div>
                        </div>
                        <div class="f_right">
                            <a href="" class="m_r10">更多 &gt;</a>
                        </div>
                    </div>
                    <div class="con">
                        <ul class="pro">
                            <li>
                                    <a href=""><img src="../JDM/images/detail01.jpg" alt=""></a>
                                    <p class="nowPrice">&yen;10.00</p>
                                    <p class="oldPrice">&yen;10.00</p>
                            </li>
                            <li>
                                    <a href=""><img src="../JDM/images/detail01.jpg" alt=""></a>
                                    <p class="nowPrice">&yen;10.00</p>
                                    <p class="oldPrice">&yen;10.00</p>
                            </li>
                            <li>
                                    <a href=""><img src="../JDM/images/detail01.jpg" alt=""></a>
                                    <p class="nowPrice">&yen;10.00</p>
                                    <p class="oldPrice">&yen;10.00</p>
                            </li>
                        </ul>
                    </div>
                </section>
                <section class="jd_porduct_box">
                    <div class="tit"><h3>京东超市</h3></div>
                    <div class="con">
                            <a href=""><img src="./images/cp1.jpg" alt=""></a>
                            <div class="con_left">
                                    <a href=""><img src="./images/cp2.jpg" alt=""></a>
                                    <a href=""><img src="./images/cp3.jpg" alt=""></a>
                            </div>
                    </div>
                </section>
                <section class="jd_porduct_box">
                    <div class="tit"><h3>京东超市</h3></div>
                    <div class="con">
                        <div class="con_left">
                        </div>
                        <div class="con_right">
                        </div>
                    </div>
                </section>
                <section class="jd_porduct_box">
                    <div class="tit"><h3>京东超市</h3></div>
                    <div class="con">
                        <div class="con_left">
                        </div>
                        <div class="con_right">
                        </div>
                    </div>
                </section>
            </div>
    </div>
    
</body>
<script>
    window.onload = function(){
        search();
        banner();
        downtime ();
    }
    function search (){
        var s = document.querySelector('.jd_search');
        var search  = document.querySelector('.jd_banner')
            ,banH = 311;
        window.onscroll = function(e){
            var scrolltop = window.scrollY;
            var boxH = search.offsetHeight;
            if(scrolltop < boxH) {
                s.style.background = 'rgba(255,0,0,'+ (scrolltop/boxH).toFixed(1)*0.85+ ')';
            }
           return false;
        }
    }
    function banner () {
        var banner = document.querySelector('.jd_banner');
        var width = banner.offsetWidth;
        var ul = document.querySelector('.jd_banner  ul:nth-of-type(1)');
        var point = document.querySelector('.jd_banner ul:nth-of-type(2)');
        var index = new Number(1);
        var interval = setInterval(function(){
            index ++;
            if(index >= 9){
                ul.style.transition='';
                index = 1;
                console.log(point.children);
            }else {
                ul.style.transition='all  .2s';
            }   
                setAt(point.children);
                point.children[index-1].className = 'at';
                ul.style.transform = 'translateX('+ (-index*10)+ '%)';
        },3000);
        
        point.addEventListener('click',function(event){    
            var e = event || window.event;
            var flg = 0;
            if(e.target.tagName == 'LI'){
                setAt(point.children);
                e.target.className = 'at';
                for(var i = 0;i <= point.children.length -1 ;i++){
                    if(point.children[i].className == 'at'){
                        flg = i;
                        console.log(i)
                        goPage(i);
                    }
                }
            }
        })
        function goPage(_index){
            index = _index;
            setAt(point.children);
            point.children[_index].className = 'at';
            ul.style.transition='all  .2s';
            ul.style.transform = 'translateX('+ (-(_index+1)*10)+ '%)';
        }
        function setAt(arr){
            for(var i = 0; i<=arr.length-1; i++){
                arr[i].className = '';
            }
        }
        var start = 0;
        var end = 0;
        var move = 0;
        ul.addEventListener('touchstart',function (event){
            var e = event || window.event;
            clearInterval(interval);
            ul.style.transition='';
            console.log(e)
            start = e.touches[0].clientX;

        })
        ul.addEventListener('touchmove',function(event){
            var e = event || window.event;
            move = e.touches[0].clientX;
            var dis = move - start;
            end = -(index * 10) + (dis/36)
            ul.style.transform = 'translateX('+ end + '%)';
            console.log(end)
        })
        ul.addEventListener('touchend',function(event){
            var e = event || window.event;
            console.log(move-start)
            if((move-start)/36 < -3){
                ++ index;
                console.log(index)
                if(index == 9){
                    index = 0;
                    ul.style.transition='';
                    ul.style.transform = 'translateX('+ (-index*10)+ '%)';
                    return;
                }
                ul.style.transition='all  .2s';
                ul.style.transform = 'translateX('+ (-index*10)+ '%)';
                
            }else{
                ul.style.transition='all  .2s';
                ul.style.transform = 'translateX('+ (-index*10)+ '%)';
                
            }
            if((move-start)/36 > 3){
                -- index;
                if(index == 0){
                    index = 8;
                    ul.style.transition='';
                    ul.style.transform = 'translateX('+ (-index*10)+ '%)';
                    return;
                }
                console.log(index);
                ul.style.transition='all  .2s';
                ul.style.transform = 'translateX('+ (-index*10)+ '%)';
            }else{
                ul.style.transition='all  .2s';
                ul.style.transform = 'translateX('+ (-index*10)+ '%)';
               
            }
            setAt(point.children);
            point.children[index-1].className = 'at';
            interval = setInterval(function(){
            index ++;
            if(index >= 9){
                ul.style.transition='';
                index = 1;
                console.log(point.children);
            }else {
                ul.style.transition='all  .2s';
            }   
                setAt(point.children);
                point.children[index-1].className = 'at';
                ul.style.transform = 'translateX('+ (-index*10)+ '%)';
        },3000);
        })

    }
    function downtime (){
        /* 

        */ 
       var spans = document.querySelectorAll('.sk .time >span');
       console.log(spans)
       var time = 2*60*60;
       var downtime = setInterval(function(){
            time --;
            var h = Math.floor(time/3600);
            var m = Math.floor(time%3600/60);
            var s = time%60;
            spans[0].innerText = Math.floor(h/10);
            spans[1].innerText = h%10;
            
            spans[3].innerText = Math.floor(m/10);
            spans[4].innerText = m%10;
            spans[6].innerText = Math.floor(m/10);
            spans[7].innerText = s%10;
            if(time <=0) {
                clearInterval(downtime);
                return;
            }
            console.log(h,m,s,time);
       },1)
    
    }
</script>
<style>
  .div {
      
  }
</style>
</html>